import "braft-editor/dist/index.css";
import React, { Component } from "react";
import BaseComponent from "@/components/BaseComponent";
import { connect } from "dva";
import { Button, Col, Drawer, Form, Popconfirm, Row } from "antd";
import { defDrawerWidth } from "@/defaultSettings";
import styles from "./index.less";
import {
  FormItem4Input,
  FormItem4Select
} from "@/pages/SystemInit/ArticleSetting/MCols";
import { DivFooter, LFlexHDiv } from "@/components/MHtmlTag";
import BraftEditor from "braft-editor";
import FileUploader from "../FileUploader";

@connect(({ loading }) => ({}))
@Form.create()
class AddView extends BaseComponent {
  attachments = React.createRef();

  constructor(props) {
    super(props);
    this.state = {
      groupTyes: [
        {
          dictValue: "1",
          dictName: "最新信息"
        },
        {
          dictValue: "2",
          dictName: "工作动态"
        },
        {
          dictValue: "3",
          dictName: "公告通知"
        },
        {
          dictValue: "4",
          dictName: "学术天地"
        }
      ]
    };
  }

  render() {
    let { onClose, form, visible } = this.props;
    const controls = [
      "undo",
      "redo",
      "separator",
      "font-size",
      "line-height",
      "letter-spacing",
      "separator",
      "text-color",
      "bold",
      "italic",
      "underline",
      "strike-through",
      "separator",
      "superscript",
      "subscript",
      "remove-styles",
      "emoji",
      "separator",
      "text-indent",
      "text-align",
      "separator",
      "headings",
      "list-ul",
      "list-ol"
    ];
    return (
      <Drawer
        title={"新增文章"}
        placement="right"
        width={defDrawerWidth}
        closable={true}
        onClose={e => {
          if (onClose) {
            onClose(e);
          }
        }}
        visible={visible}
        className={styles.addView}
      >
        <Row gutter={16}>
          <FormItem4Input
            form={form}
            label={"文章标题"}
            fieldName={"title"}
            required={true}
          ></FormItem4Input>
          <FormItem4Select
            form={form}
            label={"分组类型"}
            fieldName={"group_id"}
            required={true}
            items={this.state.groupTyes}
            initialValue={"1"}
          ></FormItem4Select>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item
              label={"文章内容"}
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 18 }}
            ></Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            {form.getFieldDecorator("content", {
              rules: [
                {
                  required: true,
                  message: "请输入内容"
                }
              ]
            })(
              <BraftEditor
                className={styles.myEditor}
                contentStyle={{ height: 300, fontSize: "14px" }}
                controls={controls}
                fontSizes={[12, 14, 16, 18, 20]}
                style={{ fontSize: "14px" }}
              />
            )}
          </Col>
        </Row>
        <div style={{ marginTop: "16px" }}>
          <FileUploader
            ref={this.attachments}
            fieldName={"attachments"}
          ></FileUploader>
        </div>
        <DivFooter>
          <LFlexHDiv>
            <LFlexHDiv flex={"1"} justifyContent={"center"}>
              <Button
                style={{
                  marginRight: 8,
                  width: "120px"
                }}
                onClick={() => {
                  if (onClose) {
                    onClose();
                  }
                }}
              >
                关闭
              </Button>
              <Popconfirm
                title="确定执行当前操作吗?"
                onConfirm={() => {
                  this.handleSaveClick();
                }}
              >
                <Button
                  style={{
                    marginRight: 8,
                    width: "120px"
                  }}
                  type="primary"
                >
                  保存
                </Button>
              </Popconfirm>
            </LFlexHDiv>
          </LFlexHDiv>
        </DivFooter>
      </Drawer>
    );
  }

  handleSaveClick = () => {
    let { form, onSubmit } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        if (onSubmit) {
          // 文章内容
          const content = values.content.toHTML();
          values["content"] = content;
          // 附件
          const attachmentsStr = this.attachments.current.getUserInput();
          values["attachments"] = attachmentsStr;
          onSubmit(values);
        }
      }
    });
  };
}

export default AddView;
